<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环渲染</title>
  <style>

  </style>
</head>

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <hr>
    <ul>
      <!-- :key的作用，可以很好的让每一个虚拟DOM节点保持状态的唯一性。 -->
      <li v-for="(item, index) in studentName" :key="index">
        {{item}}
      </li>
    </ul>
    <hr>
    <ul>
      <!-- 循环处理的数组成员就是一个对象。文本插值使用 {{object.property}} -->
      <li v-for="(item) in list" :key="item.gid">
        名称： {{item.gname}} ------ 价格： {{item.gprice}}
        <div>
          <span v-for="colorName in item.color" :style="{'color': colorName,'marginRight': '20px'}">{{colorName}}</span>
        </div>
      </li>
    </ul>

    <hr>
    <div>
      <table border width="800">
        <tr v-for="(value, name, index) in userInfo">
          <td>{{index }}</td>
          <td> {{name}}</td>
          <td>{{value}}</td>
        </tr>
      </table>
    </div>

  </div>


  <script src=" ./js/vue.js">
  </script>
  <script>

    var vm = new Vue( {
      el: "#app",
      data: {
        msg: '循环渲染代码',
        studentName: [ '张3', '李4', '文大大' ],
        userInfo: { uname: 'wenqingwu', age: 33, sex: '1', des: '高富帅' },
        list: [
          { gid: 1, color: [ 'red', 'green', 'yellow' ], gname: '香蕉', gprice: 5 },
          { gid: 2, color: [ 'pink', 'green', 'yellow' ], gname: '苹果', gprice: 5.5 },
          { gid: 3, color: [ 'red', 'blue', 'yellow' ], gname: '梨子', gprice: 4 },
          { gid: 4, color: [ 'red', 'green', 'black' ], gname: '李子', gprice: 15 },
          { gid: 5, color: [ 'red', 'white', 'yellow' ], gname: '扒拉', gprice: 6 },

        ]

      }
    } );

  </script>
</body>

</html>